<template>
	<view class="content">
		<view class="form">
			<u-form :model="form" ref="uForm" labelWidth="150rpx" :labelStyle="{color:'#333333',fontSize:'32rpx',fontWeight:700}">
				<u-form-item label="收货人:"  prop="name">
					<u-input v-model="form.name" border="none"/>
				</u-form-item>
				<u-form-item label="手机号码:" prop="tel" >
					<u-input v-model="form.tel" border="none"/>
				</u-form-item>
				<u-form-item label="所在地区:">
					<picker @change="bindPickerChange" :value="index" :range="array" mode = region>
											<view class="uni-input">{{`${array[0]}-${array[1]}-${array[2]}`}}</view>
							</picker>
				<!-- 	<u-input v-model="form.region"   @focus="setRegionShow" 
						    suffixIcon="map-fill"
						    suffixIconStyle="color: #FED194"  border="none"/> -->

				</u-form-item>
				<u-form-item label="详细地址:" prop="add_s" >
					<u--textarea v-model="form.add_s" placeholder="请输入内容"  border="none"/></u--textarea>
				</u-form-item>
				<u-form-item label="设为默认地址:" labelWidth="auto">
					<u-switch slot="right" v-model="switchVal" active-color="#FED194"></u-switch>
				</u-form-item>
			</u-form>
		</view>



		<view class="submit" @click="submit">
			保存
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: '',
				form: {
					name: '',
					tel: '',
					add_a:'',
					add_b:'',
					add_s: '',
					status:2
				},
				array: ['陕西省', '西安市', '雁塔区'],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'change',
					}, {
						min: 2,
						max: 5,
						message: '姓名2~5个字符之间',
						trigger: 'change',
					}],
					region: [{
						required: true,
						message: '请选择所在地',
						trigger: 'change',
					}],
					add_s: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'change',
					}],
					tel: [{
						required: true,
						message: '请输入手机号',
						trigger: 'change',
					}, {
						required: true,
						min: 11,
						max: 11,
						message: '手机号格式有误',
						trigger: 'change'
					}]
				},
				
				switchVal: true
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			let data=JSON.parse(e.item)
			if(data){
				this.form={...data}
				this.form.add_id=data.id
				let arr=data.add_b.split('市')
		 this.array=[data.add_a,arr[0],arr[1]]
			}
		 
		},
		methods: {
			bindPickerChange(e){
				this.array=e.detail.value
			},
			submit() {

				this.$refs.uForm.validate().then(res => {
								uni.$u.toast('校验通过')
								this.form.add_a=this.array[0]
								this.form.add_b=this.array[1]+this.array[2]
								this.form.status=this.switchVal?2:1
								this.$myRuquest('home/user/add_save', this.form).then(res => {

									uni.showToast({
										title: '添加成功',
										icon: 'none'
									});
									uni.navigateBack({
										delta: 1
									});
								})
							}).catch(errors => {
								uni.$u.toast('校验失败')
							})

			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20upx;
	}

	.form {
		background-color: #FFFFFF;
		padding: 0 24upx;
		border-radius: 12upx;
	}

	.submit {
		margin: 0 40upx;
		margin-top: 200upx;
		width: calc(100% - 80upx);
		height: 90upx;
		line-height: 90upx;
		border-radius: 45upx;
		background: #FED194;
			text-align: center;
			color: #AC7D3D;
		font-size: 32upx;
	}
	input{
			padding: 20upx;
			background-color: #FAFAFA;
			border-radius: 8upx;
		}
		.uni-input{
			padding: 20upx;
			background-color: #FAFAFA;
			border-radius: 8upx;
		}
		.u-textarea{
			background-color: #FAFAFA !important;
		}

</style>
